<template>
	<div class="allcontainer" v-loading="loading">
		<div id="components-form-demo-advanced-search">
			<div class="h2">{{ $route.query.Name }}积分，共{{ total }}分</div>
		</div>
		<div class="table">
			<el-table
				stripe
				ref="singleTable"
				:data="data"
				highlight-current-row
				style="width: 100%"
				row-key="ActivityTypeID"
				default-expand-all
				:tree-props="{ children: 'Child', hasChildren: 'hasChildren' }"
			>
				<el-table-column prop="ActivityTypeName" label="活动分类" min-width="100" fixed="left">
					<template slot-scope="scope">
						{{ scope.row.ActivityTypeName }}
					</template>
				</el-table-column>
				<el-table-column prop="SumScore" label="积分" min-width="100"></el-table-column>
			</el-table>
		</div>
	</div>
</template>

<script>
import Func from '@/utils/func';
import Cache from '@/utils/cache';
import { UserCenterDoGetSumScoreList } from '@/api/follow';
const data = [];
export default {
	components: {},
	data() {
		return {
			data,
			form: this.$form.createForm(this, {
				name: 'advanced_search'
			}),
			pagination: {
				currentPage: 1,
				pageSize: this.global.pageSize,
				pageSizeOptions: this.global.pageSizeOptions, // 每页中显示的数据
				showTotal: total => `共有 ${total} 条数据` // 分页中显示总的数据
			},
			loading: false,
			tableHeight: parseFloat(window.innerHeight - 160),
			UserInfo: Cache.get('myInfo'),
			total: 0
		};
	},
	computed: {},
	created() {
		this.getList();
	},
	mounted() {},
	methods: {
		async getList() {
			this.loading = true;
			let data = {};
			data.activityTypeID = this.$route.query.id;
			let res = await UserCenterDoGetSumScoreList(data);
			this.loading = false;
			this.total = res.data.total;
			this.data = this.convert(res.data.data);
		},
		convert(arr) {
			const newArr = arr.filter(item => item.SumScore && item.SumScore != 0);
			return newArr.map(item => {
				if (item.Child) {
					item.Child = this.convert(item.Child);
				}
				return item;
			});
		}
	}
};
</script>

<style lang="less" scoped>
.home-form {
	margin: 20px;
	background: #f8fcff;
	padding: 20px;
	border-radius: 12px;
	.ant-col {
		width: 19%;
		margin-right: 1%;
		&.option {
			margin-top: 25px;
			.ant-btn {
				padding: 0 5px;
				height: 32px;
			}
		}
		/deep/.ant-form-item {
			margin-bottom: 10px !important;
		}
		/deep/.ant-form-item-label {
			height: 20px;
			line-height: 20px;
			font-weight: 400;
			color: #8798ad;
		}
		/deep/.ant-input {
			height: 32px;
			background: #ffffff;
			border: 1px solid #dddee4;
			border-radius: 0px;
		}
		/deep/.ant-select-selection {
			height: 32px;
			background: #ffffff;
			border: 1px solid #dddee4;
			border-radius: 0px;
		}
	}
}
/deep/.el-table td .cell,
/deep/.el-table th .cell {
	text-align: left !important;
}
</style>
